{% extends "base.html" %}
{% block title %}简博主页{% endblock %}
{% block content %}
<div class='container'>
{% for message in messages %}
    <div class='alert alert-{{message.tags}}'>{{ message }}</div>
{% endfor %}
</div>

<div class="widewrapper main">
    <div class="container">
        <div class="row">
            <div class="col-md-8 blog-main">
                {% for article in articles %}
                    {% if forloop.counter|divisibleby:2 %}
                        <div class="col-md-6 col-sm-6">
                            <article class=" blog-teaser">
                                <header>
                                    <img src="/static/media/{{ article.article_img }}" alt=""  height="200" width="200" >
                                    <h3><a href="single.html?article_uuid={{ article.article_uuid }}">
                                        {%if article.article_title|length >= 10 %}
                                            {{article.article_title|slice:"10"}}...
                                        {%else%}
                                            {{article.article_title}}
                                        {%endif%}
                                    </a></h3>
                                    <span class="meta">{{ article.article_time }}</span>
                                    <hr>
                                </header>
                            </article>
                        </div>
                    {% else %}
                        <div class="col-md-6 col-sm-6">
                            <article class="blog-teaser">
                                <header>
                                    <img src="/static/media/{{ article.article_img }}" alt=""  height="200" width="200" >
                                    <h3><a href="single.html?article_uuid={{ article.article_uuid }}">
                                        {%if article.article_title|length >= 10 %}
                                            {{article.article_title|slice:"10"}}...
                                        {%else%}
                                            {{article.article_title}}
                                        {%endif%}
                                    </a></h3>
                                    <span class="meta">{{ article.article_time }}</span>
                                    <hr>
                                </header>
                            </article>
                        </div>
                    {% endif %}
                {% endfor %}

                <div class="paging">
                    <a href="#" class="older">Older Post</a>
                </div>
            </div>
            <aside class="col-md-4 blog-aside">
                <div class="aside-widget">
                    <div class="body">
                        <ul class="clean-list">
                            <h2><a href="writearticle.html"><i class="fa fa-pencil"></i>写文章</a></h2>
                        </ul>
                    </div>
                </div>
                <div class="aside-widget">
                    <header>
                        <h3>精选</h3>
                    </header>
                    <div class="body">
                        <ul class="clean-list">
                            {% for feature in featured %}
                                <li><a href="single.html?article_uuid={{ feature.article_uuid }}">{{ feature.article_title }}</a></li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>

                <div class="aside-widget">
                    <header>
                        <h3>最近</h3>
                    </header>
                    <div class="body">
                        <ul class="clean-list">
                            {% for recent_article in recent_articles %}
                                <li><a href="#">{{ recent_article }}</a></li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>

                <div class="aside-widget">
                    <header>
                        <h3>Tags</h3>
                    </header>
                    <div class="body clearfix">
                        <ul class="tags">
                            <li><a href="#">HTML5</a></li>
                            <li><a href="#">CSS3</a></li>
                            <li><a href="#">COMPONENTS</a></li>
                            <li><a href="#">TEMPLATE</a></li>
                            <li><a href="#">PLUGIN</a></li>
                            <li><a href="#">BOOTSTRAP</a></li>
                            <li><a href="#">TUTORIAL</a></li>
                            <li><a href="#">UI/UX</a></li>
                        </ul>
                    </div>
                </div>
            </aside>
        </div>
    </div>
</div>

<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/modernizr.js"></script>

{% endblock %}
